<template>
  <div class="content" :style="{paddingLeft:inputWidth+'px',paddingRight:inputWidth+'px'}">
    <div class="input-box" :style="{height:inputHeight+'px'}">
      <img src="../assets/image/user-icon.png" class="input-icon" alt="">
      <input type="text" v-model="formData.name" class="input-content" placeholder="请输入您的姓名">
    </div>
    <div class="input-box" :style="{height:inputHeight+'px'}">
      <img src="../assets/image/phone-icon.png" class="input-icon" alt="">
      <input type="number" class="input-content" v-model="formData.phone" placeholder="请输入您的手机号">
    </div>
    <div class="input-box" :style="{height:inputHeight+'px'}">
      <img src="../assets/image/code-icon.png" class="input-icon" alt="">
      <input type="text" class="input-content" v-model="formData.code" placeholder="请输入短信验证码">
      <div class="code-btn" v-if="!isCode" @click="getCode">获取验证码</div>
      <div v-else class="code-btn active-code-btn">{{num}}秒后重发</div>
    </div>
    <div class="input-box transparent-btn" @click="submit" :style="{height:inputHeight+'px'}"></div>
  </div>
</template>

<script>
export default {
  name: "product-form",
  props: ['productId','belongId'],
  data() {
    return {
      formData: {
        productId: '',
        belongId:'',
        name: '',
        phone: '',
        code: ''
      },
      isCode: false, //是否获取验证码
      num:60,
      inputHeight:'',
      inputWidth:'',
    }
  },

  watch: {},
  mounted() {
    this.inputHeight=(document.body.clientWidth)*0.12;
    this.inputWidth=(document.body.clientWidth)/375*32;

  //   console.log( '..', this.inputWidth)
  // console.log(document.body.clientWidth);


  },
  methods: {

    //提交
    submit(){
      this.formData.productId = +this.productId;
      this.formData.belongId = +this.belongId;
      if(this.formData.name && this.formData.phone && this.formData.code){
        this.$axios.post('/html/apply/businessOpportunitySave',this.formData).then(()=>{
          this.$toast.success('提交成功')
        })
      }else {
        this.$toast('请填写完整信息')
      }
    },
    //倒计时
    countdown(){

     let timer= setInterval(()=>{
        --this.num;
        if(this.num==0 || this.num<0){
          this.isCode=false;
          this.num=60;
          clearInterval(timer);
        }
      },1000)

    },
//获取验证码
    getCode() {
      if (this.formData.phone && this.formData.phone.length == 11) {
        this.$axios.get(`/html/apply/getCode/${this.formData.phone}`).then(() => {
          this.isCode=true;
          this.countdown();
        })
      } else {
        this.$toast('请填写正确的手机号')
      }
    },
  },
}
</script>

<style scoped>
.content {
  padding: 0 32px;
  position: absolute;
  left: 0;
  right: 0;
  top:35.8%;
}

.input-box {
  height: 45px;
  background: #fff;
  border-radius: 22px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 6px 0 14px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.input-icon {
  width: 19px;
  height: 19px;
  margin-right: 7px;
}

.input-content {
  flex: 1;
  width: 100%;
  font-size: 14px;
  height: 38px;
  background-color: transparent;
  border: none;
}

.code-btn {
  /*width: 100px;*/
  padding: 0 14px;
  height: 38px;
  line-height: 38px;
  background: linear-gradient(-90deg, #DEDDDD, #FFFFFF);
  border-radius: 19px;
  text-align: center;
  font-size: 14px;

}

.active-code-btn {
  color: #999898;
}

.transparent-btn {
  background-color: #FC6B42;
  opacity: 0;
}

</style>